<template>
    <div>

        <el-dialog v-model="dialogVisible"
                   class="t-dialog-content"
                   :title="title"
                   width="60%"
                   :before-close="beforeHandleClose"
                   destroy-on-close
                   :close-on-press-escape="false"
                   :close-on-click-modal="false"
                  >
            <div>
                <div style="display: flex;justify-content: flex-end">
                    <el-button type="primary">13456</el-button>
                </div>
                <el-table :data="tableData">
                    <el-table-column property="date" label="Date" width="150" />
                    <el-table-column property="name" label="Name" width="200" />
                    <el-table-column property="address" label="Address" />
                </el-table>
                <div>
                    <el-pagination
                            :current-page="currentPage"
                            :page-size="pageSize"
                            class="mt-20px"
                            :page-sizes="[10, 20, 30, 50]"
                            layout="total, prev, pager, next, jumper,sizes"
                            :total="totalSize"
                            @size-change="handleChangeSize"
                            @current-change="handleChangePage"
                    />
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">关闭</el-button>
                    <el-button @click="confirm" type="primary">确定</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
    import {ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, watch,onMounted} from 'vue'
    const obj = defineProps({
        title: {
            type:String,
            default:"查看详情"
        },
    })
    const emits = defineEmits(['cancel','handleClose'])
    let dialogVisible = ref(false)
    let currentPage = ref(1)
    let pageSize = ref(10)
    let totalSize = ref(100)
    let tableData = ref(0)
    const handleSearch = ()=> {
        currentPage.value = 1
        pageSize.value = 10
        // reload()
    }

    onMounted(async () => {
        console.log("onMounted")
        // dialogVisible.value = obj.visible
        tableData = ref([
            {
                date: '2016-05-02',
                name: 'John Smith',
                address: 'No.1518,  Jinshajiang Road, Putuo District',
            }
        ])
        totalSize.value = tableData.value.length*123
        // reload()
    })

    const handleChangePage= (value)=> {
        currentPage.value = value
        // reload()
    }
    const handleChangeSize= (value)=>  {
        pageSize.value = value
        currentPage.value = 1
        // reload()
    }


    const open = ()=> {
        console.log("cancel")
        dialogVisible.value = true
        // emits('cancel')
    }
    const cancel = ()=> {
        console.log("cancel")
        dialogVisible.value = false
        // emits('cancel')
    }
    const confirm = ()=> {
        console.log("confirm")
        dialogVisible.value = false
        // emits('cancel')
    }
    // 关闭前的回调
    const handleClose = ()=> {
        emits('handleClose')
    }
    const beforeHandleClose = (done)=>{
        console.log("handleClose")
        emits('handleClose')
        // 这个事件可以用于关闭时候处理一些事件 处理成功即关闭 特殊情况不给关闭
        setTimeout(()=>{
            return done()
        },1000)
        // return  false
    }


    defineExpose({
        open,
        cancel,
        confirm
    })
  /*  watch(visible,()=>{
        console.log("visible")
    })*/
</script>

<style scoped>

    ::v-deep .el-dialog__header {
        border-bottom: 1px solid #eee;
    }

    ::v-deep .el-dialog__title {
        font-weight: bold;
        color: #000;
    }
</style>